import React from "react";
import { ActiveList } from "./style";
import Footer from "../../components/common/footer/index";
import { activity } from "../../api";
export default class Index extends React.PureComponent {
  state = {
    activelist: []
  };
  componentDidMount() {
    // if (!this.props.userInfo) {
    //   window.location.href = 'http://www.yermn.com/api/auth/login?url=http://www.yermn.com/me'
    // }
    activity().then(res => {
      this.setState({
        activelist: res.data.data
      });
    });
  }
  goRank(id) {
    this.props.history.push("/rank/" + id);
  }
  goShare() {
    this.props.history.push("/invite/");
  }
  goClockInfo(id) {
    this.props.history.push("/meclock/" + id);
  }
  render() {
    return (
      <div>
        <ActiveList>
          {this.state.activelist.map(item => {
            return (
              <li key={item.id}>
                <h1 onClick={this.goClockInfo.bind(this, item.id)}>
                  {item.title}
                </h1>
                <div
                  className="des"
                  onClick={this.goClockInfo.bind(this, item.id)}
                >
                  <span>
                    已进行<span>{item.progress}天</span>
                  </span>
                  <span className="dk">
                    已打卡<b>{item.participants}</b>次
                  </span>
                  <span>
                    <i className="iconfont">&#xe607;</i>
                    <b>{item.praises_count}</b>次
                  </span>
                </div>
                <div className="btn">
                  <div onClick={this.goRank.bind(this, item.id)}>
                    <i className="iconfont">&#xe607;</i>排行榜
                  </div>
                  <div onClick={this.goShare.bind(this)}>
                    <i className="iconfont">&#xe624;</i>邀请好友
                  </div>
                  <div className="time">
                    <i className="iconfont">&#xe65f;</i>
                    {item.close_time.split(" ")[0]}
                  </div>
                </div>
              </li>
            );
          })}
        </ActiveList>
        <Footer atthis="clock" />
      </div>
    );
  }
}
